<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2.5;
        ctx.fillStyle = 'black';
        ctx.font = "italic 24px 'Times New Roman'";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // 1. Draw the table
        const tableX = 40, tableY = 150, tableWidth = 460, tableHeight = 20;
        ctx.strokeRect(tableX, tableY, tableWidth, tableHeight);

        // Draw table legs (as single lines)
        ctx.beginPath();
        // Left legs
        ctx.moveTo(100, tableY + tableHeight);
        ctx.lineTo(100, 350);
        ctx.moveTo(120, tableY + tableHeight);
        ctx.lineTo(120, 350);
        // Right legs
        ctx.moveTo(420, tableY + tableHeight);
        ctx.lineTo(420, 350);
        ctx.moveTo(440, tableY + tableHeight);
        ctx.lineTo(440, 350);
        ctx.stroke();

        // 2. Draw Block A
        const blockWidth = 100, blockHeight = 60;
        const blockX = 80, blockY = tableY - blockHeight;
        ctx.strokeRect(blockX, blockY, blockWidth, blockHeight);
        ctx.fillText('A', blockX + blockWidth / 2, blockY + blockHeight / 2);

        // 3. Draw the Pulley (B)
        const pulleyRadius = 30;
        const pulleyCenterX = tableX + tableWidth;
        // Adjust pulley Y so the string is horizontal and tangent to the top
        const stringY = blockY + blockHeight / 2 - 10; // String attached slightly above center of the block's face
        const pulleyCenterY = stringY + pulleyRadius;
        
        ctx.beginPath();
        ctx.arc(pulleyCenterX, pulleyCenterY, pulleyRadius, 0, 2 * Math.PI);
        ctx.stroke();
        
        // Draw pulley axle
        ctx.beginPath();
        ctx.arc(pulleyCenterX, pulleyCenterY, 4, 0, 2 * Math.PI);
        ctx.fill();
        
        // Label 'B'
        ctx.fillText('B', pulleyCenterX, pulleyCenterY - pulleyRadius - 20);

        // 4. Draw the string and hanging weight
        ctx.beginPath();
        // Horizontal part from block to pulley
        ctx.moveTo(blockX + blockWidth, stringY);
        ctx.lineTo(pulleyCenterX, stringY);
        // Arc around the pulley
        ctx.arc(pulleyCenterX, pulleyCenterY, pulleyRadius, -Math.PI / 2, 0);
        // Vertical part hanging down
        const stringEndX = pulleyCenterX + pulleyRadius;
        const stringEndY = 280;
        ctx.lineTo(stringEndX, stringEndY);
        ctx.stroke();

        // Draw the hanging weight (triangle)
        const weightHeight = 20;
        const weightWidth = 20;
        ctx.beginPath();
        ctx.moveTo(stringEndX - weightWidth / 2, stringEndY);
        ctx.lineTo(stringEndX + weightWidth / 2, stringEndY);
        ctx.lineTo(stringEndX, stringEndY + weightHeight);
        ctx.closePath();
        ctx.stroke();

    </script>
</body>
</html>